<template>
  <div class="app-container">
    <div style="width: 1000px; margin: 20px auto">
      <el-carousel height="500px" motion-blur indicator-position="none">
        <el-carousel-item v-for="item in config.imgList" :key="item">
          <el-image class="" :src="item" alt="" style="width: 100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="pbox flex">
      <div
        v-for="(item, index) in config.imgList"
        :key="index"
        :class="['item']"
      >
        <photo :image="item" :index="index" :imgList="config.imgList"></photo>
      </div>
    </div>
    <!-- <div class="flex imgbox2">
      <div class="imgboxnei" v-for="(item, index) in config.imgList" :key="index">
        <img class="" :src="item" alt="" />
      </div>
    </div> -->
    <!-- <div>
      <a :href="config.urla" target="_blank" rel="noopener noreferrer"
        ><el-button>打开小程序</el-button></a
      >
    </div> -->
  </div>
</template>

<script setup>
// import { onMounted, reactive } from "vue";
//base64放js文件
import { pic } from "@/assets/myphoto/pic.js";
import photo from "@/components/photo";
// base64放json文件
import picjson from "@/assets/picjson/picjson.json";
import { Loading } from "@element-plus/icons-vue";
//获取某个文件夹下所有文件
const images = import.meta.glob(
  "@/assets/myphoto/myIphone/*.(png|jpg|JPG|svg)"
);
//读取 E:\project\py2\imgs 下的所有文件

const config = reactive({
  img: pic,
  images: [],
  jsonpic: "",
  urla: `weixin://dl/business/?appid=wx2cdafeb97e452e7e&path=pages/my/login&query=${encodeURIComponent(
    "token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3Mzc1OTMyMjQsInVzZXJOYW1lIjoiNzAwMjQzNjMiLCJpYXQiOjE3MzY5ODg0MjR9.Nq2j2iZJs4ciKdqWbx9hTXnm2E1jURFLgLpRBP1W7uo&businessSerialNo=70500441241230IRABE"
  )}`,
  imgList: [],
  loading: false,
});
console.log(config.urla);

function getData() {
  config.images = [];
  for (const path in images) {
    images[path]().then((module) => {
      config.images.push(module.default);
    });
  }
}
async function fetchImageLinks() {
  try {
    config.loading = true;
    const response = await fetch("http://127.0.0.1/imgs/");
    config.loading = false;

    if (!response.ok) {
      throw new Error("网络响应错误");
    }
    const html = await response.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, "text/html");
    const linkElements = doc.querySelectorAll("a");
    const imageLinks = [];

    linkElements.forEach((link) => {
      const href = link.getAttribute("href");
      // 检查是否为图片链接，这里仅以常见的图片扩展名为例
      if (
        href &&
        (href.endsWith(".jpg") ||
          href.endsWith(".jpeg") ||
          href.endsWith(".png") ||
          href.endsWith(".gif") ||
          href.endsWith(".bmp"))
      ) {
        imageLinks.push("http://127.0.0.1/imgs/" + href);
      }
    });
    // displayLinks(imageLinks);
    console.log(imageLinks, "1111111111111111111");
    config.imgList = imageLinks;
  } catch (error) {
    console.error("获取图片链接出错:", error);
  }
}

// function displayLinks(links) {
//   const container = document.getElementById("linksContainer");
//   links.forEach((link) => {
//     const linkElement = document.createElement("a");
//     linkElement.href = link;
//     linkElement.textContent = link;
//     linkElement.target = "_blank";
//     container.appendChild(linkElement);
//     container.appendChild(document.createElement("br"));
//   });
// }

fetchImageLinks();
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  overflow: scroll;
}
//隐藏滚动条
.app-container::-webkit-scrollbar {
  display: none;
}
.pbox {
  width: 100%;
  align-items: center;
}
// .item {
//   margin-left: 0;
//   animation: film 3s linear infinite;
// }
// @keyframes film {
//     0% {
//         transform: translateX(0)
//     }
//     // 50% {
//     //     transform: translateX(-50%)
//     // }
//     100% {
//         transform: translateX(-140px)
//     }
// }
</style>